<template>
    <div class="box">
        <div class="header">
            <van-skeleton title :row="3" />
            <van-search v-model="value" show-action placeholder="请输入搜索关键词">
                <template #action>
                    <van-icon name="apps-o" />
                </template>
                <template #left>
                    <van-icon name="wap-nav" />
                </template>
            </van-search>
        </div>
        <div class="meddle">

            <van-tabs v-model:active="active">
                <van-tab title="推荐">
                    <van-swipe :autoplay="3000" lazy-render>
                        <van-swipe-item v-for="image in images" :key="image">
                            <img :src="image" style="width: 100%;"/>
                        </van-swipe-item>
                    </van-swipe>
                    <h3>限时购</h3>
                    <van-count-down :time="time" />
                    <img src="../../assets/ee.png" alt="" style="width: 50%;">
                </van-tab>
                <van-tab title="美食">
                    <lise/>
                   <ul style="column-count: 2;">
                    <li v-for="item in list" :key="item.id">
                        <img :src="item.image" alt="" style="width: 100%;">
                         <p>{{ item.title }}</p>
                         <p style="color: red">￥{{ item.price }}</p>
                    </li>
                   </ul>
                </van-tab>
                <van-tab title="运动">内容 3</van-tab>
                <van-tab title="保健品">内容 4</van-tab>
                <van-tab title="内衣">内容 4</van-tab>
                <van-tab title="更多">内容 4</van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script setup>



    import lise from './computer/lise.vue'
    import request from '@/utils/request.js'
    import { ref,onMounted } from "vue";
    const list=ref([])
    onMounted(()=>{
        request.get('/list',{
            params:{
                pagination:1, pageNum:30
            }
        }).then(res=>{
            if(res.data.code==200){
                list.value=res.data.data
            }
        })
    })
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
const time = ref(30 * 60 * 60 * 1000);
</script>